<template>
	<view>
		<image src="https://file.fulewanjia.com/fulewanjia/profile/appImages/property-bg@2x.png" mode="widthFix"
			class="property-bg"></image>


		<view class="index-nav" :style="{
			background: scrollTop > 50 ? 'linear-gradient(90deg, #FD8D24 0%, #FF2E3F 100%, #FF323B 100%)' : 'transparent'
		}">
			<view class="status_bar">

			</view>
			<view class="flex items-center wxjb py-32">
				<view class="flex items-center">
					<!-- #ifdef MP-WEIXIN -->
					<u-icon name="arrow-left" :bold="true" color="#FFF" class="mr-24" @click="$tab.back()"></u-icon>
					<!-- #endif -->
					<image src="https://file.fulewanjia.com/fulewanjia/profile/appImages/property-title@2x.png"
						class="index-title" mode="heightFix"></image>
				</view>
				
				<!-- #ifdef MP-WEIXIN -->
				<view class="" style="width: 32rpx;">
					
				</view>
				<!-- #endif -->

				<image src="https://file.fulewanjia.com/fulewanjia/profile/appImages/icon_xiaoxi@2x.png"
					class="index-xiaoxi" mode="" @click="$tab.nav(`/pages/index/notice/index`)"></image>
			</view>
		</view>

		<view class="">
			<view class="status_bar">

			</view>
			<view class="" style="height: 48rpx;">

			</view>
		</view>

		<view class="content px-20 mt-32 pt-16">
			<view class="nav-top pt-36 pl-32">
				<view class="text-FFF" style="width: 250rpx;">
					<view class="font-700" style="font-size: 48rpx;">
						{{goldValue}}
					</view>
					<view class="mt-12">
						我的金豆
					</view>
				</view>
			</view>

			<view class="jindou flex items-center flex-col mt-16 bg-FFF round-16 p-32">
				<view class="font-600">
					最近七日价格走势图
				</view>
				<view class="mt-12" style="color: #FD212C;">
					X:日期 Y:价格
				</view>
				<view class="charts-box mt-12">
					<!-- #ifdef APP-PLUS || H5 -->
					<qiun-data-charts type="area" :opts="opts" :chartData="chartData" />
					<!-- #endif -->
					<!-- #ifdef MP -->
					<qiun-data-charts type="area" :opts="opts" :canvas2d="true" :chartData="chartData" />
					<!-- #endif -->
				</view>
			</view>

			<view class="transaction mt-32 py-36">
				<view class="px-48">
					<view class="flex items-center justify-between">
						<view class="text-32 font-700" style="color: #FF561D;" @click="handleBuy">
							我要买豆
						</view>
						<view class="text-36 font-700 text-FFF">
							求购展示
						</view>
						<view class="text-32 font-700" style="color: #FF561D;"
							@click="$tab.nav(`/pages/property/order`)">
							我的订单
						</view>
					</view>
				</view>

				<view class="px-28">
					<view class="transaction-list">
						<s-pull-scroll ref="pullScroll" :pullDown="pullDown" :pullUp="loadData" :fixed="false">
							<view class="mt-24" v-for="(item,index) in list" :key="item.id">
								<view class="flex items-center justify-between">
									<view class="">
										{{item.createUserTemp.nickName}}—求购{{item.needJindouNum}}个金豆
									</view>
									<view class="" style="color: #FF561D;">
										求购单价:{{item.todayPrice}}
									</view>
								</view>

								<view class="mt-28 flex items-center">
									<input type="number" class="input px-28" placeholder="输入数量"
										v-model="item.sellValue" />
									<view class="self ml-24 text-32 text-FFF font-500 text-center"
										@click="handleSell(item)">
										卖出
									</view>
								</view>
							</view>
						</s-pull-scroll>
					</view>
				</view>
			</view>

			<view class="footer mt-28 p-28 grid grid-cols-4 gap-4">
				<view class="flex flex-col items-center" v-for="(item,index) in footerList" :key="index"
					@click="$modal.msg('功能尚在开放中!')">
					<image :src="`https://file.fulewanjia.com/fulewanjia/profile/appImages/${item.icon}`" mode=""
						class="image-56"></image>
					<view class="mt-12">
						{{item.name}}
					</view>
				</view>
			</view>

			<view class="mt-28 grid grid-cols-4 gap-4">
				<image :src="`https://file.fulewanjia.com/fulewanjia/profile/appImages/${item}`" mode="widthFix"
					v-for="(item,index) in footImgList" :key="index" @click="$modal.msg('功能尚在开放中!')"></image>
			</view>

			<view class="" style="height: 100rpx;">

			</view>
		</view>

		<u-popup :show="soldShow" bgColor="transparent" mode="center" @close="soldShow = false"
			:safe-area-inset-bottom="false">
			<view class="soldWrap flex flex-col items-center">
				<view class="" style="color: #C4816B;">
					今日单价
				</view>
				<view class="text-44 font-700 mt-8" style="color: #FE6835;">
					￥{{todayPrice}}
				</view>
				<view class="soldContent mt-48 py-48 flex flex-col justify-between items-center">
					<input type="number" class="input text-center" placeholder="请输入购买数量"
						placeholder-style="color:#997983" v-model="soldValue" @input="soldValueChange" />

					<view class="input text-center" style="color: #997983;">
						{{soldContent}}
					</view>
				</view>

				<view class="soldConfirm text-FFF text-center text-32" @click="handleRelease">
					立即发布
				</view>
			</view>
		</u-popup>

		<payWay :payShow="payShow" @payWayConfirm="payWayConfirm" @payClose="payShow = false"></payWay>

		<u-popup :show="pay_password" @close="pay_password = false,payPassword='' " mode="center" :round="20">
			<view class="p-48">
				<view class="pay_title">
					<text>请输入支付密码</text>
				</view>
				<view class="flex justify-around mt-28">
					<u-code-input v-model="payPassword" :maxlength="6" dot :focus="true"></u-code-input>
				</view>

				<view class="mt-32 text-FFF round-12 text-center py-20" style="background-color: #E2382B;"
					@click="confirmOrder(),pay_password = false">
					确认
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import payWay from "@/components/payWay.vue"
	export default {
		components: {
			payWay
		},
		data() {
			return {
				scrollTop: 0,
				goldValue: null,
				opts: {
					canvas2d: true,
					legend: {
						show: false,
					},
					yAxis: {
						data: [{
							min: 1
						}]
					},
					extra: {
						area: {
							type: 'curve',
							addLine: true,
							gradient: true
						},
					}
				},
				chartData: {},
				footerList: [{
						name: "我的债务",
						icon: "icon_wodezhaiwu@2x.png"
					},
					{
						name: "债务清单",
						icon: "icon_zhaiwuqingdan@2x.png"
					},
					{
						name: "信用卡托管",
						icon: "icon_xinyongkatuoguan@2x.png"
					},
					{
						name: "资产发布",
						icon: "icon_zichanfabu@2x.png"
					},
					{
						name: "债积分",
						icon: "icon_zhaijifen@2x.png"
					},
					{
						name: "请帮还",
						icon: "icon_qingbanghuan@2x.png"
					},
					{
						name: "债务咨询",
						icon: "icon_zhaiwuzixun@2x.png"
					},
				],
				footImgList: [
					'icon_xinyong.png',
					'img_zichanpinggu@2x.png',
					'img_aixinchuandi@2x.png',
					'img_anzhuanzhongxin@2x.png'
				],

				soldShow: false,
				soldContent: "预计支付金额",
				soldValue: "",
				todayPrice: 0,
				payShow: false,
				list: [],
				pay_password: false,
				payPassword: "",
				sellId: null,
				sellValue: null,
				jindou: null
			};
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop
		},
		onShow() {
			this.getData()
			this.refresh()
		},
		methods: {
			async confirmOrder() {
				this.pay_password = false
				if (!this.payPassword || this.payPassword.length != 6) {
					this.$modal.msg('请输入支付密码!')
					return
				}
				
				// #ifdef APP || H5
				let form = {
					id: this.sellId,
					payNum: this.sellValue,
					payPassword: this.payPassword
				}
				// #endif
				
				// #ifdef MP-WEIXIN
				let form = {
					id: this.sellId,
					payNum: this.sellValue,
					payPassword: this.payPassword,
					receiveType:0
				}
				// #endif
				const res = await this.$Api.property.marketReceive(form)
				this.payPassword = ""
				this.$modal.msg('发布成功!')
				this.getData()
				this.refresh()
			},
			async handleSell(row) {
				// #ifdef APP || H5
				if (!this.$store.getters.userInfo.zfbOpenId) {
					this.$modal.confirm('请先完成支付宝登录校验，方便卖出成功后转账到您的支付宝!').then(con => {
						if (con) {
							this.$tab.nav(`/pages/mine/setting/account`)
						}
					})
					return
				}
				// #endif
				
				// #ifdef MP-WEIXIN
				if (!this.$store.getters.userInfo.zfbOpenId) {
					this.$modal.msg('请先在app端绑定支付宝账户!')
					return
				}
				// #endif

				if (!row.sellValue || row.sellValue == "" || row.sellValue <= 0 || !this.isInteger(Number(row
						.sellValue))) {
					this.$modal.msg('请输入大于等于1的整数')
					return
				}

				if (row.sellValue > row.needJindouNum) {
					this.$modal.msg('卖出数量大于求购数量!')
					return
				}

				this.sellId = row.id
				this.sellValue = row.sellValue
				this.payShow = false
				this.pay_password = true
			},
			refresh() {
				this.$nextTick(() => {
					this.$refs.pullScroll.refresh();
				});
			},
			pullDown(pullScroll) {
				setTimeout(() => {
					this.loadData(pullScroll);
				}, 200);
			},
			loadData(pullScroll) {
				setTimeout(async () => {
					if (pullScroll.page == 1) {
						this.list = [];
					}

					const curList = await this.$Api.property.marketList({
						pageSize: 10,
						pageNum: pullScroll.page
					})

					this.list = this.list.concat(curList.rows || []);

					this.list.forEach(item => {
						item.sellValue = ""
					})

					if (curList.total == 0) {
						pullScroll.empty()
					}

					if (this.list.length >= curList.total) {
						pullScroll.finish();
					} else {
						pullScroll.success();
					}
				}, 500);
			},
			handleRelease() {
				if (this.soldValue <= 0 || !this.isInteger(Number(this.soldValue))) {
					this.soldValue = null
					this.$modal.msg('请输入大于等于1的整数!')
					return
				}
				this.soldShow = false
				this.payShow = true
			},
			handleBuy() {
				this.soldContent = "预计支付金额"
				this.soldValue = ""
				this.soldShow = true
			},
			async payWayConfirm(e) {
				this.payShow = false

				const res = await this.$Api.property.publish({
					needNum: this.soldValue,
					payWay: e
				})

				if (e == 2 || e == 0) {
					const wxPay = this.$pay.WeChatPay(res)
				} else {
					const alyPay = this.$pay.Alipay(res.data)
				}

			},
			async getData() {
				const res = await this.$Api.property.nowPrice()
				console.log(res)
				this.todayPrice = res

				const userRichInfo = await this.$Api.user.userRichInfo()
				userRichInfo.data.forEach(item => {
					switch (item.moneyName) {
						case "金豆":
							this.goldValue = item.amount
							break
					}
				})


				const chart = await this.$Api.property.jindouChart()
				this.opts.yAxis.data[0].min = chart.prices[0]
				let linearareadata = {
					categories: chart.dates,
					series: [{
						name: "",
						color: "#FF8B43",
						smooth: true,
						areaStyle: {
							color: {
								type: 'linear',
								x: 0,
								y: 0,
								x2: 0,
								y2: 1,
								colorStops: [{
									offset: 0,
									color: '#FF8B43' // 0% 处的颜色
								}, {
									offset: 1,
									color: '#FFFFFF' // 100% 处的颜色
								}],
								global: false // 缺省为 false
							}
						},
						data: chart.prices,
					}],
				}
				this.chartData = JSON.parse(JSON.stringify(linearareadata));
			},
			isInteger(obj) {
				return typeof obj === 'number' && obj % 1 === 0
			},
			async soldValueChange() {
				if (this.soldValue <= 0 || !this.isInteger(Number(this.soldValue))) {
					this.soldValue = null
					this.$modal.msg('请输入大于等于1的整数!')
					return
				}
				if (this.soldValue == "" || !this.soldValue) {
					this.soldContent = "预计支付金额"
					return
				}
				const res = await this.$Api.property.countNum({
					price: this.soldValue
				})
				this.soldContent = res
			}
		}
	}
</script>

<style lang="scss">
	.property-bg {
		width: 100%;
		position: absolute;
		left: 0;
		top: 0;
		z-index: 1;
	}
	
	/* #ifndef MP-WEIXIN */
	.wxjb{
		justify-content: space-between;
	}
	/* #endif */

	.index-nav {
		width: 100%;
		padding: 0rpx 32rpx 0 32rpx;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 9;

		.index-title {
			height: 40rpx;
		}

		.index-xiaoxi {
			width: 48rpx;
			height: 48rpx;
		}

	}

	.content {
		position: relative;
		z-index: 2;
		width: 100%;

		.nav-top {
			width: 100%;
			height: 176rpx;
			background: url(https://file.fulewanjia.com/fulewanjia/profile/appImages/img_renrenchidou@2x.png) no-repeat;
			background-size: 100% 100%;
		}

		.jindou {
			.charts-box {
				width: 100%;
				height: 314rpx;
				background: #F6F6F6;
				border-radius: 16rpx 16rpx 16rpx 16rpx;
			}
		}

		.transaction {
			height: 876rpx;
			background: url('https://file.fulewanjia.com/fulewanjia/profile/appImages/jiaoimg_jiaoyidating@2x.png') no-repeat;
			background-size: 100% 100%;

			.transaction-list {
				height: 720rpx;
				margin-top: 56rpx;

				.input {
					width: 454rpx;
					height: 72rpx;
					background: #F0F0F0;
					border-radius: 356rpx 356rpx 356rpx 356rpx;
					line-height: 72rpx;
				}

				.self {
					width: 172rpx;
					height: 72rpx;
					background: linear-gradient(180deg, #FF561D 33%, #FF0064 100%);
					border-radius: 356rpx 356rpx 356rpx 356rpx;
					line-height: 72rpx;
				}
			}
		}

		.footer {
			height: 314rpx;
			background: url('https://file.fulewanjia.com/fulewanjia/profile/appImages/pro-b-bg@2x.png') no-repeat;
			background-size: 100% 100%;
		}
	}

	.soldWrap {
		width: 686rpx;
		height: 1088rpx;
		background: url('https://file.fulewanjia.com/fulewanjia/profile/appImages/img_fabuqiugou1@2x.png') no-repeat;
		background-size: 100% 100%;
		position: relative;
		top: -100rpx;
		padding: 468rpx 0 48rpx 0;

		.soldContent {
			width: 622rpx;
			height: 304rpx;
			background: #FCF4F7;
			border-radius: 28rpx 28rpx 28rpx 28rpx;

			.input {
				width: 536rpx;
				height: 88rpx;
				background: #F4DEE5;
				border-radius: 98rpx 98rpx 98rpx 98rpx;
				line-height: 88rpx;

			}
		}

		.soldConfirm {
			width: 322rpx;
			height: 88rpx;
			background: linear-gradient(180deg, #FF561D 33%, #FF0064 100%);
			border-radius: 356rpx 356rpx 356rpx 356rpx;
			line-height: 88rpx;
			margin-top: 32rpx;
		}
	}
</style>